<script setup lang="ts">
import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
import { useGlobal } from "@pureadmin/utils";
import { ref, watch } from "vue";

import Dark from "~icons/material-symbols-light/dark-mode-outline";
import Light from "~icons/material-symbols-light/sunny-outline";

const { dataTheme, dataThemeChange } = useDataThemeChange();
const { $storage } = useGlobal<GlobalPropertiesApi>();

// 当前主题状态
const isDarkMode = ref(dataTheme.value || false);

// 监听主题变化
watch(
  () => isDarkMode.value,
  newVal => {
    dataTheme.value = newVal;
    dataThemeChange(newVal ? "dark" : "light");
  }
);

// 切换主题
const toggleTheme = () => {
  isDarkMode.value = !isDarkMode.value;
};
</script>

<template>
  <div class="theme-switch" @click="toggleTheme">
    <transition name="theme-icon" mode="out-in">
      <div v-if="isDarkMode" key="dark" class="theme-icon dark">
        <Dark />
      </div>
      <div v-else key="light" class="theme-icon light">
        <Light />
      </div>
    </transition>
  </div>
</template>

<style lang="scss" scoped>
.theme-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 48px;
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.9);
  }
}

.theme-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;

  &.light {
    color: var(--el-text-color-primary);
  }

  &.dark {
    color: #fff;
  }
}
</style>
